<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<html>
    <script>
        $(document).ready(function() {
            if (!Modernizr.meter) {
                alert('Sorry your brower does not support HTML5 progress bar');
            } else {
                var progressbar = $('#progressbar'),
                        max = progressbar.attr('max'),
                        time = (1000 / max) * 5,
                        value = progressbar.val();

                var loading = function() {
                    value += 1;
                    addValue = progressbar.val(value);

                    $('.progress-value').html(value + '%');

                    if (value == max) {
                        clearInterval(animate);
                    }
                };

                var animate = setInterval(function() {
                    loading();
                }, time);
            }
            ;
        });
    </script>
	<div class="demo-wrapper html5-progress-bar">
		<div class="progress-bar-wrapper">
			<progress id="progressbar" value="0" max="100"></progress>
			<span class="progress-value">0%</span>
		</div>
	</div>
</html>
